<template>
  <div class="content q-pa-sm">
    <table-basic :title="'商品参与记录'" :columns="columns" :tableData="tableData" :searchName="searchName"
                 @searchHandler="searchHandler"
                 @Refresh="Refresh"
                 @updateTable="updateTable"
                 @filtersHandler="filtersHandler"
                 @onDbclick="onDbclick"
    >
      <template v-slot:toolbar>
        <div class="row q-gutter-sm">
<!--          <q-btn color="secondary" label="添加分类" @click="alert=true"  />-->
          <q-btn color="negative" :disable="checkState <= 0" label="批量删除" @click="deleteHandler"  />
        </div>
      </template>
    </table-basic>

<!--    <form-basic :alert="alert" @close="close" :from="from" :title="'分类管理-添加'"-->
<!--                @submit="submit"-->
<!--                @uploadedImage="uploadedImage"-->
<!--                @removedImage="removedImage"-->
<!--                state="1"-->
<!--    ></form-basic>-->

    <form-basic :alert="updatealert"  @close="close" :from="from"  :title="'商品参与记录-详情'"
                @submit="update"
                @uploadedImage="uploadedImage"
                @removedImage="removedImage"
                state="2"
                :notSave="true"
                :headStyle="{width: '200px'}"
    ></form-basic>
  </div>
</template>

<script>
import { getProductJoinRecord, removeProductJoinRecord } from 'src/api/productJoinRecord'
export default {
  name: "index",
  data () {
    return {
      alert: false,
      updatealert: false,
      options: [],
      from:[
        {
          type: 'label', title: '中奖号码', class:'',  style: 'width: 200px',field: 'winNumber'
        },
        {
          type: 'label', title: '商品编号', class:'',  style: 'width: 200px',field: 'productNumber'
        },
        {
          type: 'label', title: '商品标题', class:'',  style: 'width: 200px',field: 'productTitle'
        },
        {
          type: 'label', title: '中奖用户ip', class:'',  style: 'width: 200px',field: 'userIp'
        },
        {
          type: 'label', title: '用户昵称', class:'',  style: 'width: 200px',field: 'userNickname'
        },
        {
          type: 'label', title: '用户编号', class:'',  style: 'width: 200px',field: 'userNumber'
        },
        {
          type: 'label', title: '用户总共参与次数', class:'',  style: 'width: 200px',field: 'userJoinCount'
        },
        {
          type: 'label', title: '中奖用户位置', class:'',  style: 'width: 200px',field: 'userLocation'
        },
        {
          type: 'label', title: '最小积分数', class:'',  style: 'width: 200px',field: 'minPointNum'
        },
        {
          type: 'label', title: '剩余积分数', class:'',  style: 'width: 200px',field: 'remainPointNum'
        },
        {
          type: 'label', title: '总需积分数', class:'',  style: 'width: 200px',field: 'totalPointNum'
        },
        {
          type: 'label', title: '揭晓时间', class:'',  style: 'width: 200px',field: 'lotteryTime'
        },
        {
          type: 'label', title: '实际揭晓时间', class:'',  style: 'width: 200px',field: 'finishTime'
        },
        {
          type: 'label', title: '创建时间', class:'',  style: 'width: 200px',field: 'createTime'
        },
        {
          type: 'label', title: '更新时间', class:'',  style: 'width: 200px',field: 'updateTime'
        },
        {
          type: 'label', title: '总共参与的号码数', class:'',  style: 'width: 200px',field: 'joinNumber'
        },
      ],
      tableData:[],
      updateData: {},
      deleteDisable:true,
      searchName:[
      ],
      searchFilter: {},
      columns: [
        {name:'select', field: 'select'},
        {name: 'winNumber', align: 'center', label: '中奖号码', field: 'winNumber'},
        {name: 'productNumber', label: '商品编号', field: 'productNumber',align: 'center'},
        {name: 'productTitle', align: 'center', label: '商品标题', field: 'productTitle'},
        {name: 'userIp', align: 'center', label: '中奖用户ip', field: 'userIp'},
        {name: 'userNickname', align: 'center', label: '用户昵称', field: 'userNickname'},
        {name: 'userNumber', align: 'center', label: '用户编号', field: 'userNumber'},
        {name: 'userJoinCount', align: 'center', label: '用户总共参与次数', field: 'userJoinCount',sortable: true},
        {name: 'userLocation', align: 'center', label: '中奖用户位置', field: 'userLocation'},
        {name: 'minPointNum',align: 'center', label: '最小积分数', field: 'minPointNum',sortable: true},
        {name: 'remainPointNum',align: 'center', label: '剩余积分数', field: 'remainPointNum',sortable: true},
        {name: 'totalPointNum',align: 'center', label: '总需积分数', field: 'totalPointNum',sortable: true},
        {name: 'phaseNum',align: 'center', label: '期号', field: 'phaseNum',sortable: true},
        {name: 'lotteryTime',align: 'center', label: '揭晓时间', field: 'lotteryTime',sortable: true},
        {name: 'finishTime',align: 'center', label: '实际揭晓时间', field: 'finishTime',sortable: true},
        {name: 'createTime',align: 'center', label: '创建时间', field: 'createTime',sortable: true},
        {name: 'updateTime',align: 'center', label: '更新时间', field: 'updateTime',sortable: true},
        {name: 'joinNumber',align: 'center', label: '总共参与的号码数', field: 'joinNumber',sortable: true},
        {name: 'isShow', align: 'center',label: '是否结束',format: (val, row) => `${val!==0?'是':'否'}`, field: 'isFinish', sortable: true},
        {name: 'isShow', align: 'center',label: '是否删除',format: (val, row) => `${val!==0?'是':'否'}`, field: 'isDelete', sortable: true}
      ],
      page: {
        limit: 30,
        page: 1
      },
      imageUrl: []
    }
  },
  mounted() {
    this.initialize()
  },
  components: {
    TableBasic: () => import('components/tables/TableBasic'),
    FormBasic: () => import('components/dialog/formBasic')
  },
  methods:{
    initialize(page,limit){
      if(page)
        this.page.page = page
      if(limit)
        this.page.limit = limit
      let params = Object.assign(this.page, this.searchFilter)
      getProductJoinRecord(params).then(
        success=>{
          this.tableData = success.records.map(item=>{
            item.select = false
            return item
          })
          this.$bus.$emit('UPDATE_PAGINATION', success.total)
        }
      )
    },
    onDbclick(index){
      this.updatealert = true
      this.updateData = this.tableData[index];
      this.$bus.$emit('updateState', this.updateData)
    },
    updateTable ({page, rowsPerPage, sortBy}){
      this.initialize(page, rowsPerPage)
    },
    uploadedImage(response){
      this.imageUrl.push(response.data)
    },
    removedImage(response){
      this.imageUrl = this.imageUrl.filter(r=>r !== response.data)
    },
    submit(data){
      let params = Object.assign(data,{
        imageUrl: this.imageUrl.join(',')
      })
      addClass(params).then(
        success=>{
          this.alert = false
          this.initialize()
        }
      )
    },
    update(data){
      let params = Object.assign(data,{
        imageUrl: this.imageUrl.join(','),
        id: this.updateData.id
      })
      updateClass(params).then(
        success=>{
          this.updatealert = false
          this.initialize()
        }
      )
    },
    deleteHandler(){
      let deleteids = this.checkItems.join(',')
      removeProductJoinRecord({ids: deleteids}).then(
        success=>{
          this.initialize()
        }
      )
    },
    filtersHandler(filter){
      this.searchFilter = filter;
      this.initialize();
    },
    searchHandler(filter){

    },
    Refresh(){
      this.initialize();
    },
    checkRows(flag){
      // console.log(flag)
    },
    close(){
      this.alert = false
      this.updatealert = false
    }
  },
  computed:{
    checkState: function () {
      return this.tableData.reduce((prev, cur) => {
        return prev + (cur.select? 1: 0)
      }, 0)
    },
    checkItems: function () {
      return this.tableData.filter(r=>r.select).map(n=>{
        return n.id
      })
    }
  },
  created() {
    this.$bus.$on('checkRows', this.checkRows)
  },
  beforeDestroy() {
    this.$bus.$off('checkRows', this.checkRows)
  }
}
</script>

<style scoped>

</style>
